<template>
  <div class="searchIndex">
    <div class="searchBox">
          <div class="searchInput">
            <input type="text" autofocus placeholder="请输入搜索的课程名..." v-model="searchContent"/>
          </div>
          <div class="searchIcon" @click="searchCourse">
            <button type="button">
              <img src="static/images/eng-corner/search_red.png" alt=""/>
            </button>
          </div>
    </div>
    <div class="searchList">
      <div class="searchListNav">{{isSearch?"搜索结果":"猜你喜欢"}}</div>
      <p v-if="isFind" class="notFind">对不起，没有找到</p>
      <div v-if="!isSearch" class="searchListCon">
        <div class="ec-i-list1-img" v-for="(item,index) in this.bookList.data" v-if="index<3">
          <router-link :to="{path:'/common/subDetail',query: { bookId:item.bookId,title:item.bookName}}">
            <img :src="item.imgSrc" alt="书本图片"/>
          </router-link>
        </div>
      </div>
    </div>
    <div class="Content" v-if="isSearch">
      <div class="Box" v-for="item in courseList">
        <div class="Boxuplist">
          <div class="upimgbox">
            <div class="upimgborder">
              <img :src="item.firstsrc" alt="">
            </div>
          </div>
          <div class="uptextlist">
            <p>{{item.uptexton}}</p>
            <p>{{item.uptextoff}}</p>
            <div class="Gflag">
              {{item.idnum}}
            </div>
            <div class="todatail">
              <router-link :to="{path:'/common/datail',query:{firstsrc:item.firstsrc,
              title:item.uptexton,imgone:item.downonesrc,imgtwo:item.downtwosrc,
              imgtre:item.downtresrc,textone:item.downonetexton+item.downonetext,
              texttwo:item.downtwotexton+item.downtwotext,texttre:item.downtretexton+item.downtretext
              }}"> + </router-link>
            </div>
          </div>
        </div>
        <div class="Boxdownlist">
          <div class="downBox">
            <div>
              <img :src="item.downonesrc" alt="">
            </div>
            <div class="downtext">
              <p>{{item.downonetexton}}</p>
              <p>{{item.downonetext}}</p>
            </div>
          </div>
          <div class="downBox">
            <div>
              <img :src="item.downtwosrc" alt="">
            </div>
            <div class="downtext">
              <p>{{item.downtwotexton}}</p>
              <p>{{item.downtwotext}}</p>
            </div>
          </div>
          <div class="downBox noneborder">
            <div>
              <img :src="item.downtresrc" alt="">
            </div>
            <div class="downtext">
              <p>{{item.downtretexton}}</p>
              <p>{{item.downtretext}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default{
      name:'searchIndex',
      data:function(){
        return {
          isSearch:false,
          bookList:{
            url:'static/engcorner.json',
            data:[]
          },
          courseList:[],
          searchContent:'',
          isFind:false
        }
      },
      mounted:function(){
        this.loadList();
      },
      filters:{
        uppercase:function(value){
          if(!value){
            return ""
          }else{
            return value.toUpperCase();
          }
        }
      },
      methods:{
        getCourse:function(searchContent){
          let that=this;
          if(searchContent!=""){
            this.$http.get("static/datalist.json").then(function(res){
              for(let value in res.data){
                for(let i= 0,len=res.data[value].length;i<len;i++){
                  if(res.data[value][i].uptexton.indexOf(searchContent)!=-1){
                      this.courseList.push(res.data[value][i]);
                  }
                }
              }
              that.isSearch=true;
              if(that.courseList.length==0){
                 that.isFind=true;//显示没有找到
              }else{
                that.isFind=false;
              }
            });

          }else{
            this.isSearch=false;
          }
        },
        searchCourse:function(e){
          this.courseList=[];
          this.getCourse(this.searchContent.trim().toUpperCase());
        },
        loadList:function(){
          var that=this;
          that.$http.get(""+this.bookList.url)
            .then(function(response){
              that.bookList.data=response.data.bookList;
            })
        }
      }
    }
</script>
<style>
  .searchTop{
    background: #ED6942;
    padding: 20px 0;
    font-size: 16px;
    display: flex;
    justify-content: center;
    color: #fff;
  }
  .searchCon{
    width:87%;
    display: flex;
  }
  .searchTit{
    margin-left:44.5%;
  }
  .searchBox{
    padding: 50px 0 50px 20px;
    display: flex;
    justify-content: center;
  }
  .searchInput{
    width: 80%;
    text-align: left;
    border-bottom: 1px solid #979797;
    display: flex;
    align-items: center;
  }
  .searchInput input{
    width: 100%;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 15px;
    color: #000;
  }
  .searchIcon img{
    width: 20px;
  }
  .searchIcon button{
    width: 50px;
    height: 30px;
    line-height: 30px;
    background: transparent;
    border: none;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 8px;
    letter-spacing: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
  }
  .searchListNav{
    width: 70%;
    margin:0 auto;
    font-size: 16px;
    color:#aaa;
    padding: 10px 0;
   border-bottom: 1px solid #eee;
  }
  .searchListCon{
    width: 68%;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .ec-i-list1-img{
    width: 30%;
    height: 20%;
    margin: 1% 1%;
  }
  .ec-i-list1-img img{
    width: 100%;
    height: 50%;
  }
  .notFind{
    color: #f85d3b;
    font-size:16px;
    text-align: center;
  }
</style>
